<template>
  <div></div>
</template>
<script>
import * as THREE from "three";
// 目标：掌握gsap设置动画效果

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 导入动画库
import gsap from "gsap";

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机(角度、屏幕宽度/屏幕高度、最小、最大)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
//    相机位置
camera.position.set(0, 0, 10);
//    相机添加到场景中
scene.add(camera);

// 3、添加物体
//    创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
//    几何体基本材质
const cubeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffff00,
});
//    根据几何体创建材质
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

//    修改物体位置
// cube.position.set(5,0,0);
// cube.position.x = 1;

//    缩放
// cube.scale.set(3,2,1);
// cube.scale.x = 5;

//    旋转 Math.PI = 180°
cube.rotation.set(Math.PI / 4, 0, 0, "XYZ");

//    将几何体添加到材质
scene.add(cube);

// 4、初始化渲染器
const renderer = new THREE.WebGLRenderer();
//    设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
//    将webgl渲染的canvas内容添加到body中
document.body.appendChild(renderer.domElement);
//    使用渲染器，通过相机将场景渲染
// renderer.render(scene,camera)

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper);

// 设置动画
// gsap.to(cube.position, { x: 5, duration: 5 });
var animateGO = gsap.to(cube.position, {
  x: 5,
  // 时间
  duration: 5,
  // 速率效果
  ease: "power1.inOut",
  // 重复次数，-1为无限次∞
  repeat: 3,
  // 设置往返运动
  yoyo: true,
  // 延迟运动
  delay: 1,
  onComplete: () => {
    console.log("移动动画完成");
  },
  onStart: () => {
    console.log("移动动画开始");
  },
});
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5 });

// 暂停&恢复
window.addEventListener("dblclick", () => {
  if(animateGO.isActive()){
    animateGO.pause();
  }else{
    animateGO.resume();
  }
  
});

// 设置时钟
const clock = new THREE.Clock();
function render() {
  renderer.render(scene, camera);
  // 渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

export default {
  data() {
    return {};
  },
  // created(){
  //   this.render();
  // },
  // methods:{
  //   render(){
  //     renderer.render(scene,camera);
  //     // 渲染下一帧的时候就会调用render函数
  //     requestAnimationFrame(render);
  //   }
  // }
};
</script>